<template>
  <el-dialog
    v-if="showDialog"
    title="试题预览"
    :visible.sync="showDialog"
    width="70%"
  >
    <!-- 基本信息 -->
    <div>
      <el-divider>基本信息</el-divider>
      <!-- 第二行 -->
      <el-row>
        <el-col
          :span="8"
          :offset="0"
          v-show="showIcon === 'el-icon-folder-add'"
        >
          <span class="textItem">试题编号:</span>
          {{ item.quest_num }}
        </el-col>
        <el-col
          :span="6"
          :offset="0"
          v-show="showIcon === 'el-icon-folder-add'"
        >
          <span class="textItem">试题类型:</span>
          {{
            item.quest_type === 4
              ? "简答题"
              : item.quest_type === 3
              ? "判断题"
              : item.quest_type === 2
              ? "多选题"
              : "单选题"
          }}
        </el-col>
        <el-col :span="6" :offset="0">
          <span class="textItem">归属学科:</span>
          {{ item.subject_name }}
        </el-col>
        <el-col :span="4" :offset="0">
          <span class="textItem">归属目录:</span>
          {{ item.directory_name }}
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row>
        <el-col :span="8" :offset="0">
          <span class="textItem">标签信息:</span>
          {{ item.tag_info[0] }}
        </el-col>
        <el-col :span="6" :offset="0">
          <span class="textItem">发布状态:</span>
          <el-button
            :type="item.show_state === 2 ? 'info' : 'success'"
            disabled
            plain
            size="mini"
          >
            {{ item.show_state === 1 ? "上架" : "下架" }}</el-button
          >
        </el-col>
        <el-col
          :span="6"
          :offset="0"
          v-show="showIcon === 'el-icon-folder-add'"
        >
          <span class="textItem">审核人:</span>
          暂无
        </el-col>
        <el-col
          :span="4"
          :offset="0"
          v-show="showIcon === 'el-icon-folder-add'"
        >
          <span class="textItem">审核状态:</span>
          <el-button
            :type="
              item.check_state === 3
                ? 'danger'
                : item.check_state === 2
                ? 'success'
                : 'warning'
            "
            disabled
            plain
            size="mini"
          >
            {{
              item.check_state === 3
                ? "不通过"
                : item.check_state === 2
                ? "通过"
                : "待审核"
            }}</el-button
          >
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row>
        <el-col
          :span="8"
          :offset="0"
          v-show="showIcon === 'el-icon-folder-add'"
        >
          <span class="textItem">审核意见:</span>
          {{ item.check_remarks === null ? "暂无" : item.check_remarks }}
        </el-col>
        <el-col
          :span="6"
          :offset="0"
          v-show="showIcon === 'el-icon-folder-add'"
        >
          <span class="textItem">创建人:</span>
          {{ item.create_name }}
        </el-col>
        <el-col
          :span="6"
          :offset="0"
          v-show="showIcon === 'el-icon-folder-add'"
        >
          <span class="textItem">难度:</span>
          {{
            item.difficulty === 3
              ? "困难"
              : item.difficulty === 2
              ? "中等"
              : "简单"
          }}
        </el-col>
        <el-col :span="4" :offset="0">
          <span class="textItem">发布时间:</span>
          {{ item.created_at | formatDate }}
        </el-col>
      </el-row>
    </div>
    <!-- 试题信息 -->
    <div>
      <el-divider>试题信息</el-divider>
      <el-row type="flex" class="questionTitle">
        <span class="textItem">题干信息:</span>
        <el-link
          type="primary"
          class="linkIcon"
          v-html="item.question"
          :underline="false"
        ></el-link>
      </el-row>
      <el-row class="itemRow questionTitle" type="flex">
        <span class="textItem">选项信息:</span>
        {{ item.quest_type === 4 ? "简答题，无选项" : "" }}
        <el-checkbox-group
          v-if="item.quest_type !== 4"
          :value="item.quest_options"
        >
          <el-checkbox
            v-show="val.code"
            v-for="(val, ind) in item.quest_options"
            :key="ind"
            :label="val.code"
            :name="val.code"
            :checked="val.is_true"
          ></el-checkbox>
        </el-checkbox-group>
      </el-row>
    </div>
    <!-- 答案信息 -->

    <div>
      <el-divider>答案信息</el-divider>
      <el-row>
        <span class="textItem">正确答案:</span>
        <div v-html="item.quest_answer" :offset="0" class="aswer"></div>
      </el-row>
      <el-row slot="foot" type="flex" class="questionTitle">
        <span class="textItem">答案解析:</span>
        <el-link
          class="linkIcon"
          v-html="item.quest_remark || '暂无解析'"
          :underline="false"
        ></el-link>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "questionDetail",
  data() {
    return {
      showDialog: false,
      item: {},
      showIcon: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.text {
  font-weight: 700;
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
}
.linkIcon {
  font-size: 10px;
}
.textItem {
  color: #aaa;
  margin-right: 5px;
}
.questionTitle {
  align-items: center;
  height: 20px;
}
.itemRow {
  padding: 20px 0;
}
.aswer {
  color: #409eff;
}
</style>
